<template>
  <div class="vxeGridComponent">
    <div style="flex: 1;overflow: hidden;">
      <vxe-grid
        :id="tableId"
        ref="VxeTableGrid"
        size="mini"
        height="100%"
        row-id="id"
        :border="true"
        :round="true"
        show-header-overflow 
        :auto-resize="true"
        :resizable="true"
        :data="dataList"
        :loading="tableLoading"
        :column-key='true'
        :stripe="true"
        :keep-source="true"
        :show-overflow="true"
        :highlight-hover-row="true"
        :highlight-current-row="true"
        :columns="columns || []"
        :edit-rules="editRules"
        :row-style="setRowStyle"
        :cell-style="cellStyle"
        :custom-config="customConfig"
        :merge-cells="mergeCells"
        :export-config="{}" 
        :edit-config="tableEditConfig" 
        :footer-method="footerMethod"
        :show-footer="showFooter"
        :align="'center'"
        @cell-click="cellClickEvent"
        @edit-actived="rowEditActived"
        @sort-change="sortChange"
        @edit-closed="rowEditClosedEvent"
        @current-change="currentChange"
        @checkbox-change="selectedChange"
        @radio-change="radioChange"
        @checkbox-all="selectedChange"
        @checkbox-range-start="checkboxRangeStart"
        @checkbox-range-change="checkboxRangeChange"
      >
      </vxe-grid>
    </div>
      
      <!--  -->
    <!-- .sync同步父组件绑定 -->
    <pagination
      v-model:page="paginationParams.pageNum"
      v-model:limit="paginationParams.pageSize"
      v-if="showPagination"
      v-show="paginationParams.total > 0"
      :total="paginationParams.total"
      @pagination="getTableList"
    />
  </div>
</template>

<script>
// import Sortable from 'sortablejs'
export default {
  props:{
    mergeCells: {
      type: Array,
      default: () => {
        return [
          { row: 0, col: 0, rowspan: 0, colspan: 0 }
        ];
      }
    },
    showFooter: {
      type: Boolean,
      default(){
        return false;
      },
    },
    // table Id
    tableId: {
      type: String,
      default(){
        return new Date().getTime() + ''
      }
    },
    // table loding
    tableLoading: {
      type: Boolean,
      default(){
        return false;
      },
    },
    // table 裂
    tableColumn: {
      type: Array,
      default(){
        return [];
      },
      required: true,
    },
    // table 数据源
    dataList: {
      type: Array,
      required: true,
      default(){
        return [];
      },
    },
    // table 是否分页
    showPagination:{
      type:Boolean,
      default() {
        return true;
      }
    },
    // 编辑表单验证规则
    editRules: {
      type: Object,
      default(){
        return {};
      }
    },
    // table 编辑属性
    tableEditConfig:{
      type: Object,
      default(){
        return {
          mode: 'cell',
          showStatus: true,
          autoClear: true,
          trigger: 'dblclick'
        }
      }
    },
    // table 分页参数
    paginationParams:{
      type: Object,
      default(){
        return {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    columnFieldOptions: [Array],
    // table 行样式
    setRowStyle: [Object, Function],
    // table 列样式
    cellStyle: [Object, Function],
    footerMethod: [Object, Function],
  },
  data() {
    return {
      columns: this.tableColumn,
      customConfig: {
        storage: true
      }
    }
  },
  mounted() {
    if(this.columnFieldOptions) {
      if(Array.isArray(this.columnFieldOptions) && this.columnFieldOptions.length) {
        this.columnFieldOptions.forEach(item => {
          this.columns.find(it => it.field === item.field).editRender.options = item.options
        })
      }
    }
  },
  methods: {
    // 单元格被点击触发事件
    cellClickEvent({ row, rowIndex , $event }){
      // console.log('cellClickEvent', row, rowIndex, $event)
    },
    // 单元格被激活编辑时会触发该事件
    rowEditActived({ row, rowIndex , $event }){
      // // console.log('rowEditActived', row, rowIndex, $event)
    },
    // 当排序条件发生变化时会触发该事件
    sortChange({column, property, order, sortBy, sortList, $event}){
      // console.log('sortChange', column, property, order, sortBy, sortList, $event)
      // this.$emit('sortChange',property,order); 
    },
    // 单元格编辑状态下被关闭时会触发该事件
    rowEditClosedEvent(editRow){
      let { row , column } = editRow
      if (this.$refs.VxeTableGrid.isUpdateByRow(row, column.property)) {
        this.$emit('editClosedEvent' , editRow);
      }
    },
    // 当手动选中行并且值发生改变时触发的事件
    currentChange(Data) {
      let { row , $event , rowIndex } = Data
      this.$refs.VxeTableGrid.setRadioRow(row)
      // 先清楚其他选中的 在赋值当前选中的 注意： 未做ctrl跟shift 多选范围
      this.$refs['VxeTableGrid'].clearCheckboxRow()
      this.$refs['VxeTableGrid'].toggleCheckboxRow(row)
      this.selectedChange({ records: [row] })
    },
    // 当复选框手动勾选并且值发生改变时触发的事件
    selectedChange({ records }){
      this.$emit('selectedChange' , {
        selectedList: records,
        currentItem: records[records.length - 1] || {}
      })
    },
    // 当单选框手动勾选并且值发生改变时触发的事件
    radioChange({ row }) {
      this.$emit('selectedChange' , {
        selectedList: [row],
        currentItem: row
      })
    },
    // 当鼠标范围选择开始时会触发的事件
    checkboxRangeStart($event) {
      // console.log('checkboxRangeStart', $event)
    },
    // 当鼠标范围选择内的行数发生变化时会触发的事件
    checkboxRangeChange($event) {
      // console.log('checkboxRangeChange', $event)
    },
    // 表单分页点击事件
    getTableList() {
      this.$emit('getList' , this.paginationParams)
    }
  }
}
</script>

<style scoped>
  .vxeGridComponent {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
 .vxeGridComponent :deep(.pagination-container .el-pagination){
  right: 30px;
 }
</style>